﻿@{
    ViewData["Title"] = "钉钉扫码登录";
    Layout = "/Views/Shared/_LayoutDing.cshtml";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <div id="login_container"></div>
    <button type="button" class="btn btn-primary" id="JumpToLogin">登录钉钉账号</button>
    <button type="button" class="btn btn-primary" id="JumpToPwd">密码登录</button>
</div>

@section Scripts
    {
    <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
    <script type="text/javascript">
        /*
        * 解释一下goto参数，参考以下例子：
        * var url = encodeURIComponent('http://localhost.me/index.php?test=1&aa=2');
        * var goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+url)
        */
        var redirectUri = '@(ViewBag.backurl)';
        var obj = DDLogin({
            id: "login_container",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
            goto: encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=@(ViewBag.appid)&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + redirectUri), //请参考注释里的方式
            style: "border:none;background-color:#FFFFFF;",
            width: "365",
            height: "400"
        });

        var handleMessage = function(event) {
            var origin = event.origin;
            console.log("origin", event.origin);
            if (origin == "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。
                var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
                console.log("loginTmpCode", loginTmpCode);

                //if (loginTmpCode) {
                //    // 重新拼接 url 跳转（重定向）自己页面
                //    let url =
                //        "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=' + @ViewBag.appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +
                //        redirectUri + "&loginTmpCode=" + loginTmpCode;
                //    // 由于终端不需要跳转页面 仅需要获取页面数据，使用XMLHttpRequest获取 AZ页面数据
                //    let xhr = new XMLHttpRequest();
                //    xhr.open("GET", url, true);
                //    xhr.send();
                //    xhr.onreadystatechange = function() {
                //        if (xhr.readyState === 4 && xhr.status == 200) {
                //            // 获取数据 发送后端提供二维码登录接口即可
                //            let data = JSON.parse(xhr.responseText);
                //            console.log("data:");
                //            console.log(data);
                //        }
                //    };
                //}
                window.location.href = "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=@ViewBag.appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + redirectUri + "&loginTmpCode=" + loginTmpCode;
            }
        };
        if (typeof window.addEventListener != 'undefined') {
            window.addEventListener('message', handleMessage, false);
        }
        else if (typeof window.attachEvent != 'undefined') {
            window.attachEvent('onmessage', handleMessage);
        }

        //直接访问 扫码登录
        $("#JumpToLogin").click(function() {
            window.location.href =
                window.location.href = "https://oapi.dingtalk.com/connect/qrconnect?appid=@(ViewBag.appid)&response_type=code&scope=snsapi_login&state=LoginDing&redirect_uri=" + redirectUri;
        });
        //直接访问  密码登录
        $("#JumpToPwd").click(function() {
            window.location.href =
                "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=@(ViewBag.appid)&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + redirectUri;
        });

    </script>
}
